<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/lanrenzhijia.css">
<link rel="stylesheet" type="text/css" href="../Admin/role/css/index.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../Admin/role/js/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .center-in-center{
            position: absolute;
            top: 40%;
            left: 27%;
        }
    </style>
<script language="javascript">
function moveOption(e1,e2)
{
  try
  {
    for(var i=0;i<e1.options.length;i++)
    {
      if(e1.options[i].selected)
      {
        var e = e1.options[i];
        e2.options.add(new Option(e.text, e.value));
        e1.remove(i);
        i=i-1
      }
    }
    document.getElementById('city').value=getvalue(document.getElementById('list2'));
    document.getElementById('city1').value+=getvalue(document.getElementById('list1'));
  }
  catch(e){
  
		}
}
function getvalue(geto)
{
  var allvalue = "";
  for(var i=0;i<geto.options.length;i++)
  {
    allvalue +=geto.options[i].value + ",";
  }
  return allvalue;
}
</script>

</head>
<body class="mian_bj">

<div class="center-in-center">
<form id="myform" name="myform" method="post">
  <table align="center" width="500" border="0">
    <tr>
      <td width="80" align="center">
        <select style="width:100%" multiple id="list1" name="list1"  ondblclick="moveOption(this, document.getElementById('list2'))">
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="cq">重庆</option>
          <option value="tj">天津</option>
          <option value="sx">陕西</option>
        </select>
      </td>

      <td width="20" align="center">
        <input type="button" style="width:100%" value="添加" onclick="moveOption(document.getElementById('list1'), document.getElementById('list2'))"><br><br><br>
        <input type="button" style="width:100%" value="删除" onclick="moveOption(document.getElementById('list2'), document.getElementById('list1'))">
      </td>

      <td width="80" align="center">
        <select style="width:100%"  multiple id="list2" name="list2"  ondblclick="moveOption(this, document.getElementById('list1'))">
        </select>
      </td>
    </tr>
  </table>
  <input type="text" id="city" name="city"  />
    <input type="text" id="city1" name="city1"/>
</form>
</div>
</body>
		
</html>
